<template>
	<view class="" style="width: 100vw;height: 100vh;">
		<view class="content">
			<hx-navbar :title="headName" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<view class="cont_view">
				<view class="cont_show">
					<view class="show_border" @click="numDateClick()">
						<image :src="paramsInfo.image" class="show_img" mode=""></image>
						<view class="num_show">
							{{numData}}
						</view>
					</view>
					<image class="" style="width: 83rpx;height: 62rpx;" src="@/static/exChange/arrows_black.png"
						mode="aspectFit"></image>
					<view class="show_border" @click="numZwbDateClick()">
						<image class="" style="width: 150rpx;height: 150rpx;" src="@/static/exChange/gold.png" mode="">
						</image>
						<view class="num_show">
							{{numZWbData}}
						</view>
					</view>
				</view>
				<image class="cont_view_platimg" src="@/static/exChange/platform.png" mode=""></image>
				<view class="" style="text-align: center;color: white;" @click="selDetails()">
					去购买置换材料 <u-icon name="arrow-right" color="#ffffff" size="28"></u-icon>
				</view>
			</view>
			<view class="introduce_view">
				<view class="" style="color: white;height: 70rpx;">置换说明</view>
				<view class="int_box">
					<view class="int_btn">数品置换材料</view>
					<view class="int_view">
						<image :src="paramsInfo.image" class="show_img" mode=""></image>
					</view>
					<view class="int_size">
						拥有以上材料可置换ZWB通证积分
					</view>
					<view class="" style="margin: 26rpx auto;text-align: center;">
						<image class="" style="width: 68rpx;height: 83rpx;" src="@/static/exChange/arrows_bottom.png"
							mode="aspectFit"></image>
					</view>
					<view class="" style="margin: 11rpx auto;text-align: center;">
						<image class="" style="width: 358rpx;height: 195rpx;" src="@/static/exChange/ZWB.png"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="login_btn" style="margin: 30rpx auto;" @click="confirmCheck"
				:style="{background:kbuttonBgColor}">立即置换</view>
			<view style="height: 30rpx;"></view>
		</view>
		<paypass ref="passbox" @confirm="set_done"></paypass>
	</view>
</template>

<script>
	import paypass from '@/components/pay_pass/pay_pass.vue'
	export default {
		components: {
			paypass
		},
		data() {
			return {
				headName: '',
				paramsInfo: {},
				numData: '未选择',
				numZWbData: '0',
				selNfidData: []
			}
		},
		onLoad(val) {
			const queryString = val.item;
			// 使用 JSON.parse 将字符串转换回对象  
			this.paramsInfo = JSON.parse(decodeURIComponent(queryString));
			this.headName = this.paramsInfo.name + ' 置换 ZWB通证积分'

			if (val.selectData) {
				var nums = val.selectData.split(',')
				this.numData = nums.length
				this.numZWbData = this.numData * this.paramsInfo.price
				this.selNfidData = val.selNfidData.split(',')
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		methods: {
			selDetails() {
				uni.navigateTo({
					url: '/pages/index/details?id=' + this.paramsInfo.iid
				})
			},
			numDateClick() {
				const queryString = JSON.stringify(this.paramsInfo);
				uni.redirectTo({
					url: `/pages/Exchange/objectList?item=${encodeURIComponent(queryString)}`
				})
			},
			confirmCheck() {
				if(this.numData=='未选择'){
					this.$common.successToShow('未选择置换藏品，请选择');
				}else{
				var _this=this
				this.$api.checkSecondPassword({}, res => {
					if (res.status) {
						let data = res.data
						if (data.secondPassword) {
							_this.$refs.passbox.open();
						} else {
							_this.$common.errorToShow('请设置交易密码', () => {
								uni.navigateTo({
									url: '/pages/user/settings/pay_pass/pay_pass'
								})
							});
						}
					} else {
						_this.$common.errorToShow('网络异常');
					}
				})
				}
			},
			set_done: function(pass) {
				let data = {
					secondPassword: pass,
					nftIds: this.selNfidData
				}
				this.$api.convertList(data, res => {
					if (res.status) {
						this.$common.successToShow("置换成功,ZWB通证积分 "+res.data.message, () => {
							uni.navigateBack({
								delta: 1 // 返回上两级页面  
							}); 
						});
					} else {
						this.$common.errorToShow(res.message, () => {})
					}
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	@import '/pages/login/login.css';

	.content {
		margin: 0;
		padding: 0;
		width: 100vw;
		min-height: 100vh;
		/* 设置背景颜色 */
		background-color: #000000;
		/* 设置背景图片 */
		background-image: url('@/static/exChange/back.png');
		/* 背景图片不重复 */
		background-repeat: no-repeat;
		/* 背景图片位置 */
		background-position: center center;
		/* 背景图片大小（可选） */
		background-size: cover;
		/* 或 contain, auto, 具体的宽度和高度等 */
	}

	.cont_view {
		width: 690rpx;
		margin: 60rpx auto;
	}

	.cont_view_platimg {
		width: 680rpx;
		height: 165rpx;

	}

	.cont_show {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		align-content: center;
		flex-wrap: nowrap;
		margin-bottom: 20rpx;
		width: 610rpx;

		.show_border {
			background: #1B1B1B;
			border-radius: 16rpx;
			border: 2rpx solid #D5CAA7;
			padding: 14rpx;
			position: relative;
		}

		.num_show {
			position: absolute;
			right: -10rpx;
			top: -15rpx;
			background-color: #ffce65;
			padding: 6rpx 18rpx;
			text-align: center;
			border-radius: 30rpx;
		}

		.show_img {
			width: 226rpx;
			height: 228rpx;
			border: 4rpx solid #FFE592;
		}
	}

	.introduce_view {
		width: 690rpx;
		margin: 50rpx auto;

		.int_box {
			padding: 14rpx;
			width: 660rpx;
			height: 915rpx;
			/* 设置背景图片 */
			background-image: url('@/static/exChange/back_black.png');
			/* 背景图片不重复 */
			background-repeat: no-repeat;
			/* 背景图片位置 */
			background-position: center center;
			/* 背景图片大小（可选） */
			background-size: cover;
		}

		.int_btn {
			width: 265rpx;
			height: 78rpx;
			border-radius: 100rpx;
			text-align: center;
			display: grid;
			place-items: center;
			font-size: 32rpx;
			color: black;
			font-weight: 600;
			margin: 20rpx auto 0;
			background: linear-gradient(135deg, #ECC58B 0%, #FFECC4 50%, #ECC58B 100%);
		}

		.show_img {
			width: 226rpx;
			height: 228rpx;
			margin-top: 20rpx;
		}

		.int_view {
			margin: 35rpx auto;
			width: 499rpx;
			height: 315rpx;
			border-radius: 16rpx;
			border: 4rpx solid #D5CAA7;
			text-align: center;
		}

		.int_size {
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #F5D3A2;
			line-height: 56rpx;
			text-align: center;
		}
	}
</style>